<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>热力图</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script src='http://localhost:9000/examples/resources/images/heatmap.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [118.72592770248409, 32.003780334808596, 7000], //相机的位置
        lookAt: [118.72592770248409, 32.003780334808596, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });
    addHeatMap();

    function addHeatMap() {
        let heatmap = new GE.HeatMap({
            //配置项
            radius: 8,//决定点的半径大小。
            maxOpacity: 1,//决定点的透明程度，值为0-1，值越大越不透明；minOpacity与maxOpacity默认分别为0和1
            minOpacity: 0.5,
            blur: .55,//：每个点都是两个圆组成的，分别为内圆和外圆；外圆越大，看起来这个点越模糊，内圆部分比较清晰；外圆的颜色比较固定且与内圆颜色不同，
            //内圆的颜色由value确定；blur决定外圆与内圆的占比大小，值为0-1；值越大，外圆占比越大。
            gradient: {
                '.13': 'rgb(0, 0, 0)',
                '.26': 'rgb(221, 51, 221)',
                '.39': 'rgb(255, 255, 0)',
                '.52': 'rgb(0, 0, 255)',
                '.65': 'rgb(0, 119, 17)',
                '.78': 'rgb(0, 119, 17)'
            },//值0对应着白色，未明确的值则取两个颜色之间的混合色。采用插值计算
        })
        app.add(heatmap);

        //必须设置数据才能显示
        // var heatmapData = [{ "lng": 118.71992787775078, "lat": 32.01066374658279, "count": -82 }, { "lng": 118.72839821771487, "lat": 31.992631107923156, "count": -82 }, { "lng": 118.753357, "lat": 32.00893, "count": -82 }, { "lng": 118.753357, "lat": 32.008987, "count": -84 }, { "lng": 118.753357, "lat": 32.008995, "count": -75 }, { "lng": 118.753357, "lat": 32.008999, "count": -84 }, { "lng": 118.753357, "lat": 32.009045, "count": -85 }, { "lng": 118.753357, "lat": 32.009064, "count": -84 }, { "lng": 118.753357, "lat": 32.009083, "count": -88 }, { "lng": 118.753357, "lat": 32.009129, "count": -87 }, { "lng": 118.753357, "lat": 32.00914, "count": -86 }, { "lng": 118.753357, "lat": 32.009178, "count": -85 }, { "lng": 118.7533645, "lat": 32.0011863, "count": -97 }, { "lng": 118.7533645, "lat": 32.001194, "count": -104 }, { "lng": 118.7533645, "lat": 32.0012092, "count": -85 }, { "lng": 118.7533645, "lat": 32.0012168, "count": -91 }, { "lng": 118.7533645, "lat": 32.0012207, "count": -97 }, { "lng": 118.7533645, "lat": 32.0012321, "count": -98 }, { "lng": 118.7533645, "lat": 32.0076446, "count": -84 }, { "lng": 118.7533645, "lat": 32.0076904, "count": -98 }, { "lng": 118.7533645, "lat": 32.0080871, "count": -44 }, { "lng": 118.7533645, "lat": 32.0086936, "count": -94 }, { "lng": 118.7533645, "lat": 32.0089836, "count": -44 }, { "lng": 118.7533645, "lat": 32.0089874, "count": -44 }, { "lng": 118.7533645, "lat": 32.0090026, "count": -86 }, { "lng": 118.7533645, "lat": 32.0090293, "count": -88 }, { "lng": 118.7533645, "lat": 32.0091781, "count": -88 }, { "lng": 118.7533645, "lat": 32.0100364, "count": -87 }, { "lng": 118.7533645, "lat": 32.0139999, "count": -86 }, { "lng": 118.753365, "lat": 32.007664, "count": -85 }, { "lng": 118.753372, "lat": 32.007935, "count": -82 }, { "lng": 118.753372, "lat": 32.009117, "count": -86 }, { "lng": 118.7533721, "lat": 32.0010223, "count": -85 }, { "lng": 118.7533721, "lat": 32.0012054, "count": -92 }, { "lng": 118.7533721, "lat": 32.001213, "count": -108 }, { "lng": 118.7533721, "lat": 32.0012207, "count": -108 }, { "lng": 118.7533721, "lat": 32.0079345, "count": -44 }, { "lng": 118.7533721, "lat": 32.0082397, "count": -79 }, { "lng": 118.7533721, "lat": 32.0083427, "count": -85 }, { "lng": 118.7533721, "lat": 32.0083847, "count": -83 }, { "lng": 118.7533721, "lat": 32.0083961, "count": -86 }, { "lng": 118.7533721, "lat": 32.0084266, "count": -88 }, { "lng": 118.7533721, "lat": 32.0089836, "count": -44 }, { "lng": 118.7533721, "lat": 32.0089874, "count": -93 }, { "lng": 118.7533721, "lat": 32.0097427, "count": -95 }, { "lng": 118.7533798, "lat": 32.0009918, "count": -85 }, { "lng": 118.7533798, "lat": 32.0012016, "count": -94 }, { "lng": 118.7533798, "lat": 32.0078315, "count": -98 }, { "lng": 118.7533798, "lat": 32.0082321, "count": -95 }, { "lng": 118.7533798, "lat": 32.0084686, "count": -102 }, { "lng": 118.75338, "lat": 32.007832, "count": -94 }, { "lng": 118.753387, "lat": 31.998678, "count": -103 }, { "lng": 118.753387, "lat": 32.008301, "count": -81 }, { "lng": 118.7533874, "lat": 31.9986743, "count": -44 }, { "lng": 118.7533874, "lat": 32.0012435, "count": -99 }, { "lng": 118.7533874, "lat": 32.0070037, "count": -86 }, { "lng": 118.7533874, "lat": 32.0075988, "count": -66 }, { "lng": 118.7533874, "lat": 32.0076637, "count": -44 }, { "lng": 118.7533874, "lat": 32.0089492, "count": -44 }, { "lng": 118.753395, "lat": 32.0076789, "count": -96 }, { "lng": 118.753395, "lat": 32.0091667, "count": -77 }, { "lng": 118.753395, "lat": 32.0093765, "count": -82 }, { "lng": 118.753395, "lat": 32.0131568, "count": -71 }, { "lng": 118.753395, "lat": 32.0131721, "count": -63 }, { "lng": 118.753395, "lat": 32.0155944, "count": -104 }, { "lng": 118.753395, "lat": 32.0158691, "count": -65 }, { "lng": 118.7534027, "lat": 32.0005836, "count": -105 }, { "lng": 118.7534027, "lat": 32.0101318, "count": -80 }, { "lng": 118.7534027, "lat": 32.0110702, "count": -65 }, { "lng": 118.753403, "lat": 32.008976, "count": -92 }, { "lng": 118.753403, "lat": 32.01107, "count": -67 }, { "lng": 118.75341, "lat": 32.008984, "count": -100 }, { "lng": 118.7534103, "lat": 31.9985923, "count": -44 }, { "lng": 118.7534103, "lat": 31.9992561, "count": -67 }, { "lng": 118.7534103, "lat": 32.0011863, "count": -90 }, { "lng": 118.7534103, "lat": 32.001213, "count": -103 }, { "lng": 118.7534103, "lat": 32.0071296, "count": -100 }, { "lng": 118.7534103, "lat": 32.0076713, "count": -100 }, { "lng": 118.7534103, "lat": 32.0089836, "count": -93 }, { "lng": 118.7534103, "lat": 32.0098075, "count": -89 }, { "lng": 118.7534103, "lat": 32.0098686, "count": -99 }, { "lng": 118.7534103, "lat": 32.0101814, "count": -85 }, { "lng": 118.7534103, "lat": 32.0145301, "count": -88 }, { "lng": 118.7534103, "lat": 32.0145339, "count": -108 }, { "lng": 118.7534103, "lat": 32.0146408, "count": -88 }, { "lng": 118.7534179, "lat": 32.0011863, "count": -87 }, { "lng": 118.7534179, "lat": 32.0012283, "count": -89 }, { "lng": 118.7534179, "lat": 32.0092468, "count": -96 }, { "lng": 118.7534179, "lat": 32.010147, "count": -98 }, { "lng": 118.7534179, "lat": 32.0145149, "count": -89 }, { "lng": 118.7534179, "lat": 32.0155906, "count": -89 }, { "lng": 118.7534255, "lat": 32.0012321, "count": -86 }, { "lng": 118.7534255, "lat": 32.0082015, "count": -82 }, { "lng": 118.7534255, "lat": 32.0139694, "count": -103 }, { "lng": 118.7534255, "lat": 32.0144805, "count": -81 }, { "lng": 118.7534255, "lat": 32.0145683, "count": -86 }, { "lng": 118.7534255, "lat": 32.0255622, "count": -75 }, { "lng": 118.753433, "lat": 32.011044, "count": -67 }, { "lng": 118.753433, "lat": 32.011093, "count": -85 }, { "lng": 118.7534332, "lat": 32.0012664, "count": -99 }, { "lng": 118.7534332, "lat": 32.0073318, "count": -84 }, { "lng": 118.7534332, "lat": 32.0073585, "count": -80 }, { "lng": 118.7534332, "lat": 32.0074653, "count": -89 }, { "lng": 118.7534332, "lat": 32.0078086, "count": -68 }, { "lng": 118.7534332, "lat": 32.0083503, "count": -86 }, { "lng": 118.7534332, "lat": 32.0110931, "count": -77 }, { "lng": 118.7534408, "lat": 32.0084342, "count": -101 }, { "lng": 118.7534408, "lat": 32.0089416, "count": -92 }, { "lng": 118.7534408, "lat": 32.0092048, "count": -80 }, { "lng": 118.7534408, "lat": 32.0155754, "count": -76 }, { "lng": 118.7534408, "lat": 32.0155792, "count": -73 }, { "lng": 118.7534408, "lat": 32.0156364, "count": -87 }, { "lng": 118.753441, "lat": 31.998869, "count": -99 }];
        // var heatmapData = [{ "lng": 118.71992787775078, "lat": 32.01066374658279, "count": -82 }, { "lng": 118.72839821771487, "lat": 31.992631107923156, "count": -82 }];
        heatmap.setData(heatmapData);

        window.heatmap = heatmap;
    }

    window.app.on('Click', function (e) {
        console.log(e);
    });

</script>

</html>